<template>
  <div class="tools-container">
    <div class="tools-header">
      <div class="tool-categories">
        <div class="category active">
          <i class="fa fa-code"></i>
          JSON工具
        </div>
        <div class="category">
          <i class="fa fa-file-text"></i>
          格式化
        </div>
        <div class="category">
          <i class="fa fa-play"></i>
          在线运行
        </div>
        <div class="category">
          <i class="fa fa-wrench"></i>
          常用工具
        </div>
        <div class="category">
          <i class="fa fa-image"></i>
          图片工具
        </div>
        <div class="category">
          <i class="fa fa-globe"></i>
          网络工具
        </div>
        <div class="category">
          <i class="fa fa-file"></i>
          文本工具
        </div>
        <div class="category">
          <i class="fa fa-lock"></i>
          编码加密
        </div>
        <div class="category">
          <i class="fa fa-shopping-bag"></i>
          应用广场
        </div>
      </div>
    </div>

    <div class="tools-content">
      <div class="tools-grid">
        <!-- SQL转Markdown工具 -->
        <div class="tool-card" @click="goToTool('/home/tools/toMarkdown')">
          <div class="tool-icon">
            <i class="fa fa-file-text"></i>
          </div>
          <div class="tool-info">
            <h3>SQL转Markdown</h3>
            <p>SQL语句转换为Markdown格式</p>
          </div>
        </div>

        <!-- DTO转Markdown工具 -->
        <div class="tool-card" @click="goToTool('/home/tools/dtoToMarkdown')">
          <div class="tool-icon">
            <i class="fa fa-code"></i>
          </div>
          <div class="tool-info">
            <h3>DTO转Markdown</h3>
            <p>DTO对象转换为Markdown文档</p>
          </div>
        </div>

        <!-- 可以继续添加更多工具卡片 -->

        <div class="tool-card" @click="goToTool('/home/tools/jsonToSql')">
          <div class="tool-icon">
            <i class="fa fa-database"></i>
          </div>
          <div class="tool-info">
            <h3>JSON转SQL工具</h3>
            <p>将JSON数据转换为SQL语句</p>
          </div>
        </div>


        <div class="tool-card" @click="goToTool('/home/tools/fileConverter')">
          <div class="tool-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="tool-info">
            <h3>idata文件转换工具</h3>
            <p>将错误的json数据转换为正确的json数据</p>
          </div>
        </div>

        <div class="tool-card" @click="goToTool('/home/tools/timeConverter')">
          <div class="tool-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="tool-info">
            <h3>时间戳转换工具</h3>
            <p>将时间戳转换为日期</p>
          </div>
        </div>


        <div class="tool-card" @click="goToTool('/home/tools/batchInsert')">
          <div class="tool-icon">
            <i class="fa fa-search"></i>
          </div>
          <div class="tool-info">
            <h3>批量插入工具</h3>
            <p>将SQL语句批量插入到数据库中</p>
          </div>
        </div>

        <div class="tool-card" @click="goToTool('/home/tools/excelCompare')">
          <div class="tool-icon">
            <i class="fa fa-table"></i>
          </div>
          <div class="tool-info">
            <h3>Excel对比工具</h3>
            <p>对比两个Excel文件的差异</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goToTool = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.tools-container {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7f8;

  .tools-header {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .tool-categories {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 5px;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 2px;
      }

      .category {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
        color: #666;

        i {
          font-size: 16px;
        }

        &:hover {
          background: #f5f5f5;
          color: #42b983;
        }

        &.active {
          color: #42b983;
          font-weight: 500;
        }
      }
    }
  }

  .tools-content {
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
      padding: 10px;

      .tool-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .tool-icon {
          width: 50px;
          height: 50px;
          background: #f5f7f8;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 24px;
            color: #42b983;
          }
        }

        .tool-info {
          flex: 1;

          h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
            margin-bottom: 4px;
          }

          p {
            margin: 0;
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}
</style>